<template>
  <div class="AlertTipsView" :id="id" :idd='id'>

    <div class="m-toast-inner" id="m-toast-inner" childI="0" :style="{top:toastTop+'px',left:toastLeft+'px'}">
      <!--<div class="m-toast-inner-text">ewrwrwerwr</div>
      <div class="m-toast-inner-text">ewrwrwerwrewrwrwerwrewrwrwerwrewrwrwerwr</div>-->
    </div>

    <div class="m-sys-toast-inner" id="m-sys-toast-inner">
      <!--<div class="m-sys-toast-inner-text">ewrwrwerwr</div>-->
    </div>
  </div>
</template>


<style scoped>
.AlertTipsView{
  pointer-events: none;position: fixed;z-index: 20000;
}
.tipsAlert{

}

.m-toast-inner{
  position: absolute;width: 300px;height: 100px;
}
.m-sys-toast-inner{
  position: absolute;
  width: 7.5rem;
  top:4rem;
  display:flex;display: -webkit-flex;justify-content:center;flex-direction:column;

}


</style>

<style>

</style>
<script setup>
import {ref,watch, onMounted, onUnmounted, computed,} from "vue";
import { useStore} from 'vuex';
import Enum from "@/js/Enum";
let store = useStore();
let clsid=winApp.getClsId();
let id=ref(clsid);
let toastTop=ref(0);
let toastLeft=ref(0);
console.log('AlertTipsView ',id.value);

winApp.bindHandler(Enum.VIEW_SYSLabelNoticeView, clsid, sysLabel);
winApp.bindHandler(Enum.VIEW_LabelNoticeView, clsid, tipsLabel);
/**样式标记**/
let dataClass='';
/*组件挂载完成后执行的函数；*/
onMounted(() => {
  let ddd='#'+id.value;
  dataClass=document.getElementById(clsid).attributes[0].name;
  console.log("AlertTipsView onMounted  ",dataClass);
});

onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  winApp.deleteNotification(clsid);
  // console.log(" AlertTipsView onUnmounted  卸载组件实例后 destroyed",clsid);
});

function sysLabel(mes){
  let sysmes='<div class="m-sys-toast-inner-text">'+mes+'</div>'
  $('#m-sys-toast-inner').prepend(sysmes);
}



function tipsLabel(mes){
  let childI=$('#m-toast-inner').attr('childI');
  childI++;
  $('#m-toast-inner').attr('childI',childI);

  let children=$('#m-toast-inner').children();
  for(let i=0;i<children.length;i++){
    let top=$(children[i]).attr('top');
    top=parseFloat(top)+50;
    $(children[i]).attr('top',parseFloat(top));
    $(children[i]).css('top',-top+'px');
  }

  let mesId="m-toast-inner-text"+childI;
  let mesDiv='<div class="m-toast-inner-text" top="0" id='+mesId+'>'+mes+'</div>';
  $('#m-toast-inner').append(mesDiv);
  $('#'+mesId).animate({opacity:'1'},"slow",'swing').delay(1000).animate({opacity:'0'},"slow",()=>{
    $('#'+mesId).remove();
  });


}


let bodyHeightSatue=computed(()=>{return store.state.bodyHeight;});
watch(bodyHeightSatue,(newValue,oldValue)=>{
  // console.log("AlertTipsView watch  bodyHeightSatue  ------------------",store.state.bodyWidth);
  if(newValue!==0){
    toastTop.value=Math.floor((store.state.bodyHeight-100)/2);
    toastLeft.value=Math.floor((store.state.bodyWidth-300)/2);
  }

});
</script>
